<template>
  <div class="question-area">
    <span class="number">{{ number }}</span>
    <span class="title"> {{ question.title }} </span>
    <span class="is-required" v-if="question.must"> * </span>
  </div>
  <div class="answer-area">
    <div class="block">
      <el-rate v-model="answer" :colors="colors"> </el-rate>
    </div>
    <!-- <el-slider
      v-model="answer"
      :step="1"
      show-stops
      :min="question.detail.start"
      :max="question.detail.start + question.detail.range - 1"
    >
    </el-slider> -->
  </div>
</template>

<script>
export default {
  props: {
    question: Object,
    number: Number,
    changeAnswers: Function,
  },
  data() {
    return {
      answer: null,
      colors: ["#99A9BF", "#F7BA2A", "#FF9900"], // 等同于 { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
    };
  },
  watch: {
    // 监听答案的变化
    // 并改变原来问卷中的答案部分
    answer: function(newVal) {
      this.changeAnswers(this.number, newVal);
    },
  },
};
</script>

<style scoped>
.question-area {
  margin-bottom: 20px;
}

.question-area span {
  margin-right: 5px;
}

.number {
  font-weight: bolder;
  font-size: 18px;
}

.title {
  font-size: 18px;
}

.is-required {
  background-size: 100%;
  vertical-align: -2px;
  font-size: 18px;
  color: red;
}

.answer-area {
  font-size: 14px;
}
</style>
